<style lang="scss">
@import "../uv.scss";
</style>
<template>
  <div>
    <uv-popup closeable ref="payPopup" mode="bottom" @change="popPwdChange" :close-on-click-overlay="false">
      <div>
        <u-pay @payChange="payClick" ref="payVue"></u-pay>
      </div>
    </uv-popup>
    <u-order-pop @success="payTypeClick(advanceTypeForm, 1)" :taskForm="advanceTypeForm" ref="orderPop"></u-order-pop>
    <uv-popup ref="popPwdRef" mode="center" round="10" @change="popPwdChange" :close-on-click-overlay="false" closeable>
      <div class="pay-pop">
        <div class="p1755763657">输入密码</div>
        <div class="p1755763837">
          <uv-input placeholder="请输入支付密码" type="password" border="surround" v-model="paymentForm.password"></uv-input>
        </div>
        <div @click="confirmPaymentTap" class="p1755763584">确认支付</div>
      </div>
    </uv-popup>

    <scroll-view scroll-anchoring :refresher-triggered="isRefreshing" :refresher-enabled="true" scroll-y scroll-top="0" @refresherrestore="onRefresherRestore" @refresherrefresh="bindrefresherrefresh" @scrolltolower="onReachBottom" class="p1755842066" :style="{ height: `calc(100vh - 100px - ${info.safeArea.top}px)` }">
      <div class="p30">
        <div class="common-empty" v-if="tableData.length === 0 && isOnce">
          <uv-empty mode="data" />
        </div>
        <div class="p1755830669  mb30 bfff" v-for="(item, index) in tableData" :key="index">
          <div class="p1755831263">
            <uv-cell-group>
              <uv-cell>
                <template v-slot:icon>
                  <uv-tags v-if="typeForm[item.type]?.text" :borderColor="typeForm[item.type]['bgColor']" :text="item.type_name" :bgColor="typeForm[item.type]['bgColor']" :color="typeForm[item.type]['color']" size="mini"></uv-tags>
                </template>
                <template v-slot:value>
                  <div class="fz30" :style="{color:  item.status == 1 ? '#E60012' : '#727171'}">
                    {{item.status_desc}}
                  </div>
                </template>
              </uv-cell>
            </uv-cell-group>
          </div>
          <div @click="descTap(item)" v-if="item.pickup_address_address" class="p1755828770">
            <uv-cell-group>
              <uv-cell :stop="false">
                <template v-slot:title>
                  <div style="width: 75vw;" class="fz34 single-line">
                    {{item.pickup_address_address }}
                  </div>
                </template>
                <template v-slot:label>
                  <div style="color:  #9FA0A0;" class="fz30 fac pt10 ">
                    <div class="mr20">
                      {{(item.pickup_address_name + ' ' + item.pickup_address_tel)}}
                    </div>
                    <div v-if="item.pick_up_code">取件码&nbsp;&nbsp;{{item.pick_up_code}}</div>

                  </div>
                </template>
                <template v-slot:icon>
                  <div class="p1755828710">
                    <uv-avatar font-size="28rpx" text="取" bg-color="#000000"></uv-avatar>
                  </div>
                </template>
              </uv-cell>
            </uv-cell-group>
          </div>
          <div @click="descTap(item)" v-if="item.type == 3 " class="p1755828770">
            <uv-cell-group>
              <uv-cell :stop="false">
                <template v-slot:title>
                  <div style="width: 75vw;" class="fz34 single-line">
                    {{item.purchase_address_type == 1 ? item.purchase_shop_title : '就近购买'}}
                  </div>
                </template>
                <template v-slot:label v-if="item.purchase_address_type == 1">
                  <div style="color:  #9FA0A0;" class="fz30 fac pt10 ">
                    <div class="mr20">{{item.purchase_shop_address}}</div>
                  </div>
                </template>
                <template v-slot:icon>
                  <div class="p1755828710">
                    <uv-avatar font-size="28rpx" text="取" bg-color="#000000"></uv-avatar>
                  </div>
                </template>
              </uv-cell>
            </uv-cell-group>
          </div>
          <div @click="descTap(item)" class="p1755828770" v-if="item.delivery_address_address">
            <uv-cell-group>
              <uv-cell :stop="false">
                <template v-slot:title>
                  <div style="width: 75vw;" class="fz34 single-line">
                    {{item.delivery_address_storey}}
                    <div v-if="item.delivery_address_house_number" style="display: inline;">
                      ({{item.delivery_address_house_number}})</div>
                  </div>
                </template>
                <template v-slot:label>
                  <div style="color:  #9FA0A0;" class="fz30  pt10 single-line">
                    {{(item.delivery_address_name )}} &nbsp;&nbsp;{{item.delivery_address_tel}}
                  </div>
                </template>
                <template v-slot:icon>
                  <div class="p1755828710">
                    <uv-avatar font-size="28rpx" :text="item.type > 3 ? '服' : '收'" :bg-color="item.type > 3 ? '#3DA316' : '#E60012'"></uv-avatar>
                  </div>
                </template>
              </uv-cell>
            </uv-cell-group>
          </div>
          <div class="p1755828770 " v-if="item.type > 3 && item.goods_img && item.goods_img.length">
            <uv-cell-group>
              <uv-cell :stop="false">
                <template v-slot:title>
                  <div class="fz34 pb20 single-line">宠物照片：
                  </div>
                </template>
                <template v-slot:label>
                  <div class="p1755839435">
                    <div class="p1755839504" v-for="(child, childIndex) in item.goods_img" :key="index + '-' + childIndex">
                      <img @click="previewImageTap(item.goods_img, childIndex)" class="p1755839504-1" :src="child" alt="">
                    </div>
                  </div>
                </template>
                <template v-if="item.delivery_address_address" v-slot:icon>
                  <div class="p1755828710">
                    <uv-avatar font-size="28rpx" text=" " bg-color="rgba(255, 255, 255, 0)"></uv-avatar>
                  </div>
                </template>
              </uv-cell>
            </uv-cell-group>
          </div>
          <div class="pt30" v-if=" item.status == 7"></div>
          <div v-if="item.status != 6  && item.status != 7" class="p1755845614">
            <div v-if="item.status == 2 && item.service_status == 1" class="fz30 p1756176880 fac" style="color: #E60012">
              预计{{item.deliver_time_desc}}到达</div>
            <div v-else></div>
            <div class="fac " style="justify-content: flex-end;">
              <button v-if="item.status == 3 && item.service_status == 4" @click="evaluateTap(item)" style="color: #333;border-radius: 8rpx!important; border: 2rpx solid #c9caca!important;" class="fz26 pt15 pb15 common-button pl30 pr30">去评价</button>
              <div style="border-color: #E60012;color: #E60012" v-if=" item.is_pay_advance_price != 1 && item.service_status == 3 && item.type == 3 && item.is_initiation_of_payments == 1" class="p1756178098 fz26 fac jcc ml0  mr30" @click="advanceTypeForm = item, $refs.orderPop.openFun()">立即支付</div>
              <div class="p1756178098 fz26 fac jcc" v-if="item.status == 2">在线联系</div>
              <!-- v-if="item.status == 3 && item.service_status == 4 "  -->
              <div v-if="item.status == 4 || item.status == 3" @click="addOneTap(item)" class="pl20">
                <button class="common-button fz26 pt15 pb15 ml0 mr0" style="color: #e60012;border-radius: 8rpx!important; border: 2rpx solid #e60012!important; ">再来一单</button>
              </div>

              <div class="p1756178238" v-if="item.status == 1 && item.is_pay == 0" @click="payTypeClick(item)">立即支付
                <div style="font-size: 12px;" class="fac jcc p1756188725">剩余
                  <uv-count-down :time="item.create_time_over" format="mm:ss" autoStart millisecond></uv-count-down>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>
<script>

import { getMyOrderList, getUserOrderInfo } from '@/api/index.js'
import orderPopVue from './orderPop.vue'
import payVue from '@/components/pay.vue'
import payMixin from '../mixin/payMixin.js'
import dataJsonMixin from '../mixin/dataJson.js'
export default {
  components: {
    'u-pay': payVue,

    'u-order-pop': orderPopVue,

  },
  mixins: [payMixin, dataJsonMixin],
  data() {
    return {
      advanceTypeForm: {},
      info: uni.getSystemInfoSync(),
      isOnce: false,
      isRefreshing: false, // 防止重复刷新
      total: 0,
      current_page: 0,
      routeQuery: {},
      statusForm: {
        1: {
          text: '未支付',
          color: '#E60012'
        },
        2: {
          text: '待收货/待服务',
        },
        3: {
          text: '待评价',
        },
        4: {
          text: '已完成',
        },
        5: {
          text: '退款',
        },
        6: {
          text: '取消',
        },
        7: {
          text: '待接单',
        },
      },
      tableData: [],
      form: {
        page: 1,
        limit: 10,
        status: 0
      },
      list: [{
        name: '全部',
      }, {
        name: '待支付',
      }, {
        name: '待收货/服务中'
      }, {
        name: '待评价'
      }, {
        name: '退款'
      }]

    }
  },

  methods: {

    popPwdChange() {
      this.$set(this.paymentForm, 'password', '');
    },
    _clearAll() {
      this.tableData = []
      this.current_page = 0
      this.$set(this.form, 'page', 1)
    },
    evaluateTap(item) {
      if (item) {
        uni.navigateTo({ url: '/pages-worker/evaluate?id=' + item.id });
      }
    },
    addOneTap(item) {
      uni.removeStorage({ key: 'typeForm' });
      uni.removeStorage({ key: 'dzb' });
      let pickup_address = {
        "name": item.pickup_address_name,
        "tel": item.pickup_address_tel,
        "province": item.pickup_address_province,
        "city": item.pickup_address_city,
        "area": item.pickup_address_area,
        "town": item.pickup_address_town,
        "storey": item.pickup_address_storey,
        "house_number": item.pickup_address_house_number,
        "address": item.pickup_address_address,
        "latitude": item.pickup_address_lat,
        "longitude": item.pickup_address_lng,
      }
      let delivery_address = {
        "name": item.delivery_address_name,
        "tel": item.delivery_address_tel,
        "province": item.delivery_address_province,
        "city": item.delivery_address_city,
        "area": item.delivery_address_area,
        "town": item.delivery_address_town,
        "storey": item.delivery_address_storey,
        "house_number": item.delivery_address_house_number,
        "address": item.delivery_address_address,
        "latitude": item.delivery_address_lat,
        "longitude": item.delivery_address_lng,
      }

      if (item.type == 1) uni.setStorage({ key: 'dzb', data: JSON.stringify({ 'type-Q-1': pickup_address, 'type-S-1': delivery_address }) });
      if (item.type == 2) uni.setStorage({ key: 'dzb', data: JSON.stringify({ 'type-Q-2': pickup_address, 'type-S-2': delivery_address }) });
      if (item.type == 3) uni.setStorage({ key: 'dzb', data: JSON.stringify({ 'type-S-3': delivery_address }) });
      if (item.type == 4) uni.setStorage({ key: 'dzb', data: JSON.stringify({ 'type-S-4': delivery_address }) });
      if (item.type == 5) uni.setStorage({ key: 'dzb', data: JSON.stringify({ 'type-S-5': delivery_address }) });

      let form = {
        bounty: Number(item.bounty) == 0 ? null : Number(item.bounty),
        estimate_goods_price: Number(item.estimate_goods_price) == 0 ? null : Number(item.estimate_goods_price),
        orderPrice: Number(item.order_price) == 0 ? null : Number(item.order_price),
        describe: item.describe,
        remarks: item.remarks,
        weight: item.weight,
        lx: item.goods_type_id,
        goods_type_id: item.goods_type_id,
        is_open_delivery_code: item.is_open_delivery_code,
        pick_up_code: item.pick_up_code,
        purchase_address_type: item.purchase_address_type,
      }
      if (item.type == 3) {
        form.ZForm = {
          "title": item.purchase_shop_title, "address": item.purchase_shop_address,
          "lat": item.purchase_shop_lat, "lng": item.purchase_shop_lng
        }
      }
      // this.$set(this.form, 'pick_up_code', form.pick_up_code || '')
      // this.$set(this.form, '', form.lx || '')
      if (item.goods_img?.length) form.fileList = item.goods_img.map(i => { return { url: i } })
      uni.setStorage({ key: 'typeForm', data: JSON.stringify(form) });

      if (item.type == 1 || item.type == 2) {
        uni.navigateTo({ url: '/pages-worker/checkout/fetch?type=' + item.type });
      }
      if (item.type == 3) {
        uni.navigateTo({ url: '/pages-worker/checkout/buy?type=' + item.type });
      }
      if (item.type == 4 || item.type == 5) {
        uni.navigateTo({ url: '/pages-worker/pet?type=' + item.type });
      }
    },
    descTap(item) {
      if (item) {
        uni.navigateTo({
          url: '/pages-worker/order?id=' + item.id
        });
        // let limit = this.form.page * this.form.limit
        // this.current_page = 0
        // this.$set(this.form, 'page', 1)
        // this.initPage(this.form.status, limit)
      }
    },

    previewImageTap(urls, current) {
      uni.previewImage({
        urls: urls,
        current: current,
        fail() {
          this.$uv.toast('预览图片失败')
        },
      });
    },
    onReachBottom() {
      if (this.total > this.tableData.length) {
        let page = this.form.page
        this.$set(this.form, 'page', page + 1)
        this.initPage(this.form.status)
      }
    },
    bindrefresherrefresh() {
      this._clearAll()
      this.isRefreshing = true
      this.initPage(this.form.status)

    },
    onRefresherRestore() {
      this.isRefreshing = false
    },
    payOrderFun() {
      this.$refs.popPwdRef.close();
      this._clearAll()
      this.initPage(this.form.status)
    },

    initPage(status = 0, limit) {
      this.isOnce = false
      this.$set(this.form, 'status', status)
      if (this.form.page == this.current_page) return
      uni.showLoading({ title: '加载中', mask: true })
      let form = JSON.parse(JSON.stringify(this.form))
      if (limit) form.limit = limit
      getMyOrderList(form).then(res => {
        uni.hideLoading()
        this.isRefreshing = false
        this.isOnce = true
        if (res.code === 200) {
          let data = res.result && res.result.data && JSON.parse(JSON.stringify(res.result.data)).map(item => {
            if (item.create_time) {
              item.create_time_over = (new Date(this.parseIosCompatibleDate(item.create_time)).getTime() + (15 * 1000 * 60)) - new Date().getTime()
            }
            return item
          })
          this.total = res.result.total
          this.current_page = res.result.current_page
          this.tableData = this.tableData.concat(data)
        }
      })
    }
  },
}
</script>

<style lang="scss">
.p1755830669 {
  border-radius: 20rpx;
  box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  padding-left: 30rpx;
  padding-right: 30rpx;

  .p1755831263 {
    border-bottom: 2rpx solid #efefef;
    margin-bottom: 10rpx;

    .uv-cell__body {
      padding: 30rpx 0 !important;
    }
  }

  .uv-line {
    border: none !important;
  }

  .p1755828770 {
    .uv-cell__left-icon-wrap {
      margin-right: 30rpx !important;
    }

    .uv-cell__title-text {
      color: #333 !important;
    }

    .p1755828710 {
      .uv-avatar {
        height: 50rpx !important;
        width: 50rpx !important;
      }
    }

    .uv-cell__body {
      padding: 15rpx 0 !important;
    }
  }
}
</style>
<style lang="scss" scoped>
@import "../common.scss";

.p1755839504 {
  width: calc(33.33333% - 16rpx) !important;
  position: relative;
}
::v-deep .common-empty {
  height: 50vh !important;
  .uv-empty {
    height: 100% !important;
  }
}
.p1755839504:nth-child(2) {
  margin: 0 24rpx;
}

.p1755839504-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p1755839435 {
  display: flex;
  width: 100%;
}

.p1755839504::before {
  display: block;
  content: "";
  padding-bottom: 100%;
}

.p1756176880 {
  text-align: left;
}

.p1756178098 {
  width: 150rpx;
  height: 67rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #c9caca;
}

.p1756178238 {
  background-color: #e60012;
  color: #fff;
  width: 180rpx;
  height: 70rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #e60012;
  font-size: 26rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 1.2;

  .p1756188725 {
    scale: 0.8;
  }
}

.mr30 {
  margin-right: 30rpx;
}
</style>